<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="script/client" src="script/require-jquery.js"></script>
        <style>
            div.canvasBox{
                border:1px solid white;
                height:602px;
                width:1202px;
                color: white;
            }
            div.connectionInformation{
                color: white;
                width: 50%;
                height: 50%;
                margin: 0px auto;
                margin-top:50px;
                font-family: sans-serif;
                font-weight: bold;
                text-align: center;
            }
            input.textInput{
                border-radius: 2px;
                background-color:gray;
                border:1px solid #c9c9c9;
                font-family: sans-serif;
                font-weight: bold;
                /*margin:1px;*/
                padding:3px;
            }
            input.shipColor{
                display:none;
            }
            div.inputRow{
                margin:4px;
            }
            img{
                border-radius: 3px;
            }
            img.highlight{
                background-color: orange;
            }
        </style>
        <script>
            var highlight = function(image){
                $.each($('img'), function(index, value){
                    $(value).removeClass('highlight');
                });
                $(image).addClass('highlight');
            };
            $(document).ready(function(){
                $($('img')[0]).addClass('highlight');
                $.each($('img'), function(index, value){
                    $(value).click(function(){highlight(value)});
                });
            });
        </script>
    </head>
    <body bgcolor="black">
        <div id ="canvasBox" class="canvasBox">
            <div id="connectionInformation" class="connectionInformation">
                <div class="inputRow">server hostname/ip: <input class="textInput" id="server" type="text" value="localhost"/></div>
                <div class="inputRow">port: <input class="textInput" id="port" type="text" value="1337"/></div>
                <div class="inputRow">username: <input class="textInput" id="username" type="text" value="InsertNameHere"/></div>
                <div class="inputRow">text color: <input class="textInput" id="color" type="text" value="white"/></div>
                <div class="inputRow">
                    <div id="shipOptions">
                        <input id="ship1" class="shipColor" type="radio" name="shipColor"  value="ship1" checked="checked" /><label for="ship1"><img src="images/ship1.png"/></label>
                        <input id="ship2" class="shipColor" type="radio" name="shipColor"  value="ship2" /><label for="ship2"><img src="images/ship2.png"/></label>
                        <input id="ship3" class="shipColor" type="radio" name="shipColor"  value="ship3" /><label for="ship3"><img src="images/ship3.png"/></label>
                        <input id="ship4" class="shipColor" type="radio" name="shipColor"  value="ship4" /><label for="ship4"><img src="images/ship4.png"/></label>
                        <input id="ship5" class="shipColor" type="radio" name="shipColor"  value="ship5" /><label for="ship5"><img src="images/ship5.png"/></label>
                        <input id="ship6" class="shipColor" type="radio" name="shipColor"  value="ship6" /><label for="ship6"><img src="images/ship6.png"/></label>
                    </div>
                </div>
                <div class="inputRow"><input id="connect" type="submit" value="Connect to server"/></div>
            </div>
        </div>
        <input id="joinGame" type="submit" value="Join Game"/>
    </body>
</html>
